<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">

function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}
if(!IsPC()){
   window.location.href ="${path}/mobile/redirect/index";
}
</script>
<meta name="renderer" content="webkit"> 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title data-index="0" id="selextTitle">${网页标题 }</title>
<meta name="keywords" content="${网页关键词}">
<meta name="description" content="${网页描述 }" />
<link
	href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css"
	rel="stylesheet" type="text/css">
<link
	href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link href="${path }/resource/css/styleOne/animate.min.css"
	rel="stylesheet" type="text/css" />
<link href="${path }/resource/css/visitor/base.css" rel="stylesheet"
	type="text/css">
<link rel="shortcut icon" href="${浏览器logo }">
<style>
.wrap-box {
	overflow: hidden;
	margin-top: 12px;
}



.carousel-wrap {
	width: 940px;
	float: right
}

.carousel-indicators {
	bottom: 10px;
	width: 78%;
	text-align: right;
}

.carousel-control.right, .carousel-control.left {
	background: transparent
}

.carousel-indicators li {
	background-color: #dab866
}

.carousel-indicators li.active {
	background: #ffffff
}

.service {
	margin-top: 40px;
	overflow: hidden;
	padding-bottom: 45px;
}

h3 {
	font-size: 24px;
	color: #555555
}

.en-tit {
	position: relative;
	color: #dab75b;
	top: 10px;
	left: 50%;
	margin-left: -41px;
}

.en-tit .line, .en-tit .line2 {
	position: absolute;
	top: 15px;
	display: inline-block;
	height: 1px;
	width: 60px;
	background: #dab75b
}

.en-tit .line {
	left: -70px;
}

.en-tit .line2 {
	left: 90px;
}

.service .tab {
	width: 110px;
	float: left;
	margin-right: 20px;
	margin-top: 40px;
}

.service .tab li {
	cursor: pointer;
	position: relative;
	font-size: 16px;
	padding-bottom: 15px;
	text-align: center;
	background: #dab75b;
	color: #ffffff;
	margin-bottom: 5px;
	border-radius: 4px;
}

.service .tab li.active {
	background: #c18a3c
}
.service .tab li:hover{background: #c18a3c}
.service .tab li:last-of-type {
	
}

.service .tab li img {
	display: block;
	margin: 0px auto;
	padding: 20px 0;
}

.service .tab li:nth-of-type(3) img {
	padding: 15px 0
}

.service .tab .plus {
	display: block;
	font-size: 30px;
	height: 38px;
}

.tab-content {
	margin-top: 40px;
}

.tab-content .con1 li {
	margin-bottom: 5px;
	border: 1px solid #c18a3c;
	border-radius: 6px;
	position: relative;
	float: left;
	width: 164px;
	height: 238px;
	overflow: hidden;
	margin-right: 5px;
	cursor: pointer;
}

.tab-content .con1 li:nth-of-type(5) {
	width: 333px;
	margin-right: 0;
}

.tab-content .con1 li:last-of-type {
	margin-right: 0px;
}

.tab-content li img {
	border-radius: 6px;
	width: 100%;
	height: 100%;
}

.tab-content .con1 li .txt {
	position: absolute;
	left: 50%;
	bottom: 10px;
	background: rgba(188, 141, 74, 0.8);
	color: #ffffff;
	width: 150px;
	height: 65px;
	margin-left: -75px;
	border-radius: 4px;
	text-align: center
}
.tab-content .con1 li .txt:hover,.tab-content .con2 li .txt:hover{background: rgba(188, 141, 74, 0.9);}
.tab-content .con1 li:nth-of-type(5) .txt {
	width: 300px;
	margin-left: -150px;
}

.tab-content li .txt span {
	display: block
}

.tab-content li .txt .name {
	margin-top: 5px;
}

.tab-content li .txt .line {
	height: 1px;
	width: 20px;
	margin: 5px auto;
	background: #ffffff
}

.tab-content li .txt .money {
	font-size: 13px;
}

.tab-content .con2 li {
	cursor: pointer;
	margin-bottom: 5px;
	border: 1px solid #c18a3c;
	border-radius: 6px;
	position: relative;
	float: left;
	width: 333px;
	height: 238px;
	overflow: hidden;
	margin-right: 5px;
}

.tab-content .con2 li:last-of-type {
	margin-right: 0px;
}

.tab-content .con2 li:nth-of-type(3) {
	margin-right: 0px;
}

.tab-content .con2 li .txt {
	position: absolute;
	left: 50%;
	bottom: 10px;
	background: rgba(188, 141, 74, 0.8);
	color: #ffffff;
	width: 300px;
	height: 65px;
	margin-left: -150px;
	border-radius: 4px;
	text-align: center
}

.tab-content .con2, .tab-content .con3 {
	display: none
}
.tab-content .con2 li, .tab-content .con3 li{    cursor: pointer;
}

.triangle {
	border-left: 10px solid #c18a3c;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	position: absolute;
	top: 0;
	top: 50%;
	right: -10px;
	margin-top: -5px;
	display: none;
}

.service .tab li.active .triangle {
	display: block;
}

.service-case {
	padding-top: 50px;
	padding-bottom: 70px;
}

.service-case ul {
	margin-top: 50px;
	overflow: hidden;
}

.service-case ul li {
	position: relative;
	padding-bottom: 12px;
	border-radius: 8px;
	float: left;
	width: 265px;
	background: #ffffff;
	margin-right: 25px;
}

.service-case ul li:nth-of-type(4) {
	margin-right: 0px;
}

.service-case ul li img {
	display: block;
	width: 240px;
	margin: 20px auto;
	height: 120px;
}

.service-case ul li .txt {
	font-size: 16px;
	margin-left: 25px;
	color: #c6944e;
}

.service-case .text-none {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0px;
	right: 0px;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.7)
}

.service-case .text-none a {
	color: #ffffff;
	border: 1px solid #ffffff;
	width: 100px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	display: block;
	margin: 82px auto;
	border-radius: 15px;
}

.service-case ul li:hover .text-none {
	display: block
}

.team {
	padding-top: 50px;
	padding-bottom: 20px;
}

.team ul {
	margin-top: 50px;
	overflow: hidden;
}

.team ul li {
	margin-bottom: 30px;
	position: relative;
	border-radius: 8px;
	float: left;
	height: 174px;
	width: 265px;
	background: #f4f4f4;
	margin-right: 25px;
}

.team ul li:nth-of-type(1) {
	height: 377px;
}

.team ul li:nth-of-type(4) {
	margin-right: 0px;
}

.team ul li:nth-of-type(7) {
	margin-right: 0px;
}

.team ul li img {
	width: 100%;
	height: 100%
}

.team ul li .person {
	position: absolute;
	top: 20px;
	left: 20px;
	color: #c6944e;
}

.team ul li .person .name {
	font-size: 20px;
}

.team ul li .person .job {
	font-size: 14px;
	margin-left: 12px;
}

.team ul li .person .info {
	max-width: 140px;
}
 .team ul li:nth-of-type(1) .info{max-width:226px;} 
.team ul li .person .line {
	display: block;
	height: 1px;
	width: 24px;
	margin: 20px 0;
	background: #c6944e
}

.team .text-none {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0px;
	right: 0px;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.7)
}

.team .text-none a {
	color: #ffffff;
	border: 1px solid #ffffff;
	width: 100px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -15px;
	margin-left: -50px;
	border-radius: 15px;
}

.team ul li:hover .text-none {
	display: block
}

.news {
	padding-top: 50px;
	padding-bottom: 40px;
}

.news .wrap {
	margin-top: 50px;
	overflow: hidden;
}

.news .wrap .left {
	width: 49%;
	background: #ffffff;
}

.news .wrap .left .tit {
	line-height: 100px;
	text-align: center;
	padding: 0px 35px;
	width: 100%;
	height: 100px;
	border-bottom: 2px solid #f4f4f4;
	color: #c6944e;
	font-size: 34px;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.news .wrap .left .tab-list {
	padding: 0 35px;
	border-bottom: 2px solid #f4f4f4
}

.news .wrap .left .tab-list a {
	width: 19%;
	color: #bcbcbc;
	display: inline-block;
	font-size: 16px;
	height: 50px;
	line-height: 50px;
}

.news .wrap .left .tab-list a:hover{color: #555555;}
.news .wrap .left .tab-list a.active {
	color: #555555;
}

.news .wrap .left ul {
	padding: 0 35px;
}

.news .wrap .left ul li {
	position: relative;
	color: #555555;
	border-bottom: 1px solid #f4f4f4;
	height: 65px;
	line-height: 65px;
	cursor: pointer;
}

.news .wrap .left ul li .solid {
	position: absolute;
	top: 50%;
	margin-top: -2px;
	width: 6px;
	height: 6px;
	background: #c6944e;
	border-radius: 50%;
	display: inline-block
}

.news .wrap .left ul li span {
	display: inline-block;
}

.news .wrap .left ul li .time {
	padding-left: 20px;
	font-size: 16px;
	color: #555555;
}

.news .wrap .left ul li .head {
	margin-left: 15px;
	border-radius: 10px;
	background: #c6944e;
	color: #ffffff;
	width: 66px;
	height: 22px;
	line-height: 22px;
	text-align: center;
}

.news .wrap .left ul li .abstract {
	margin-left: 20px;
}

.tab-con {
	display: none;
	height: 260px;
}

.tab-con:nth-of-type(1) {
	display: block;
}

.news .wrap .right {
	width: 550px;
	height: 412px;
	overflow: hidden
}

.news .wrap .right img {
	width: 100%;
	height: 362px;
}

.news .wrap .right a {
	width: 100%;
	background: #c78d56;
	color: #ffffff;
	height: 50px;
	font-size: 16px;
	line-height: 50px;
	text-align: center;
	display: block
}
</style>
</head>
<body class="">
	<jsp:include page="_top.jsp"></jsp:include>
	<div class="gray-bg"  id="app">
		<div class="container">
			<div class="wrap-box">
				<ul class="menu" >
					<cms:ad var="items" code="ywfl"></cms:ad>
					<c:forEach var="item" items="${items }">
						<li @mouseover="selectAd('${item.adUrl }')" ><a  href="javascript:void(0)" ><img
								src="${item.adImg }" alt="">${item.adTitle }</a></li>
					</c:forEach>
				</ul>
				<cms:ad var="gttt" code="banner"></cms:ad>
				<div class="carousel-wrap">
					<div class="business-wrap">
                        <div class="business-list" v-for="item in ads">
                            <div class="img-box"><img :src="item.adImg" alt=""></div>
                            <div>
                                <h4><a href="">{{item.adTitle}}</a></h4>
                                <div class="business-list-link">
                                   {{item.adInfo1}}
                                </div>
                                <div class="btns"><a :href="item.adUrl">在线咨询</a><a target="blank" :href="item.adUrl">查看详情</a></div>
                            </div>
                        </div>
                    </div>
                    
					<div id="myCarousel" class="carousel slide" data-ride="carousel">
						<!-- 轮播（Carousel）指标 -->
						<ol class="carousel-indicators">
							<c:forEach items="${gttt }" var="item" varStatus="count">
								<li data-target="#myCarousel" data-slide-to="${count.index}"
									<c:if test="${count.index eq 0 }">class="active"</c:if>></li>
							</c:forEach>
						</ol>
						<!-- 轮播（Carousel）项目 -->
						<div class="carousel-inner">
							<c:forEach items="${gttt }" var="item" varStatus="count">
								<div
									class='<c:if test="${count.index eq 0 }">active</c:if> item'>
									<a href="${item.adUrl}"> <img src="${item.adImg }"
										alt="${item.adTitle}"></a>
								</div>
							</c:forEach>
						</div>
						<!-- 轮播（Carousel）导航 -->
						<a class="carousel-control left" href="#myCarousel"
							data-slide="prev"></a> <a class="carousel-control right"
							href="#myCarousel" data-slide="next"> </a>
					</div>
				</div>
			</div>
		</div>
	
	<div class="container">
		<div class="service">
			<h3 class="text-center">我们的服务</h3>
			<h3 class="en-tit">
				<span class="line"></span>service<span class="line2"></span>
			</h3>
			<ul class="tab">
				<li class="active"><img src="${path}/resource/images/s1.png"
					alt="">记账+办证 <span class="triangle"></span></li>
				<li><img src="${path}/resource/images/s2.png" alt="">执照许可证<span
					class="triangle"></span></li>
				<li><img src="${path}/resource/images/s3.png" alt="">报告<span
					class="plus">+</span><img src="${path}/resource/images/s4.png"
					alt="">注销/<span class="triangle"></span></li>
			</ul>
			<div class="tab-content">
				<ul class="con1">
					<li v-for="item in jzbz"  @click="toArticle(item.artId)" ><img :src="item.artImage" alt="">
						<div class="txt">
							<span class="name">{{item.artTitle }}</span> <span class="line"></span>
							<span class="money">{{item.artAbstract }}</span>
						</div></li>
				</ul>
				<ul class="con2">
					<li v-for="item in zzxkz" @click="toArticle(item.artId)" ><img :src="item.artImage" alt="">
						<div class="txt">
							<span class="name">{{item.artTitle }}</span> <span class="line"></span>
							<span class="money">{{item.artAbstract }}</span>
						</div></li>
				</ul>
				<ul class="con2 con3">
					<li v-for="item in bgzx" @click="toArticle(item.artId)" ><img :src="item.artImage" alt="">
						<div class="txt">
							<span class="name">{{item.artTitle }}</span> <span class="line"></span>
							<span class="money">{{item.artAbstract }}</span>
						</div></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="gray-bg">
		<div class="container">
			<div class="service-case">
				<h3 class="text-center">服务案例</h3>
				<h3 class="en-tit">
					<span class="line"></span>service<span class="line2"></span>
				</h3>
				<div class="cases">
					<ul>
						<li v-for="item in fwal"  @click="toArticle(item.artId)"  ><img :src="item.artImage" alt="">
							<div class="txt">
								<span class="txt">{{item.artTitle }}</span>
								<div class="text-none">
									<a href="" target="blank">查看更多</a>
								</div>
							</div>
							</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="team">
			<h3 class="text-center">我们的团队</h3>
			<h3 class="en-tit">
				<span class="line"></span>service<span class="line2"></span>
			</h3>
			<ul>
				<cms:ad var="items" code="wmdtd"></cms:ad>
				<c:forEach var="item" items="${items }">
					<li><img src="${item.adImg }" alt="">
						<div class="person">
							<span class="name">${item.adTitle } </span> <span class="job">${item.adInfo1 }</span>
							<span class="line"></span> <p class="info">${item.adInfo2 }</p>
						</div>
						 <div class="text-none">
							<a href="${item.adUrl }" target="blank">查看更多</a>
						</div></li> 
				</c:forEach>

			</ul>
		</div>
	</div>
	<div class="gray-bg">
		<div class="container">
			<div class="news">
				<h3 class="text-center">新闻动态 & 联系我们</h3>
				<h3 class="en-tit">
					<span class="line"></span>news<span class="line2"></span>
				</h3>
				<div class="wrap">
					<div class="left fl">
						<div class="tit">
							<span class="time">新闻动态</span>
						</div>
						<div class="tab-list">
							<cms:artType var="type" code="xw"></cms:artType>
							<c:forEach items="${type }" var="item">
								<a
									v-on:click="changeType('${item.code}','${item.artTypeName }')"
									href="javascript:;">${item.artTypeName }</a>
							</c:forEach>
						</div>
						<ul class="tab-con">
							<li v-for="item in arts" v-on:click="toArticle(item.artId)"><span
								class="solid"></span> <span class="time">{{item.artCreatetiem
									| getYear}}</span> <span class="head">{{typeName}}</span> <span
								class="abstract">{{item.artTitle}}</span></li>
						</ul>
					</div>
					<div class="right fr">
						<cms:ad var="lxwm" multi="false" code="lxwm"></cms:ad>
						<img alt="" src="${lxwm.adImg }"> <a href="">联系我们</a>
					</div>
				</div>
			</div>
		</div>
		</div>
		<jsp:include page="_foot.jsp"></jsp:include>
	</div>
</body>
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/AjaxProxy.js"></script>
<script type="text/javascript"
	src="${path }/resource/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/visitor/index.js"></script>
<script>
	var app = new Vue({
		el : '#app',
		data : {
			offset : 0,
			limit : 4,
			arts : [],
			jzbz : [],
			zzxkz : [],
			bgzx : [],
			fwal : [],
			ads:[],
			code : 'qydt', // 默认企业动态
			typeName : '企业动态'
		},
		filters : {
			getYear : function(value) {
				var data = new Date(value);
				return data.getFullYear();
			}
		},
		methods : {
			selectAd:function(code){
				$.AjaxProxy({
					c : false,
					p : {
						"code" : code
					}
				}).invoke("${path}/findAd", function(loj) {
					app.ads = loj.getValue("rows");
				});
			},
			changeType : function(code, name) {
				app.code = code;
				app.typeName = name;
				app.loadArt();
			},
			toArticle : function(id) {
				window.open("${path}/redirect/serviceDetails?id=" + id);
			},
			
			loadArt : function() {
				$.AjaxProxy({
					c : false,
					p : {
						"offset" : app.offset,
						"limit" : app.limit,
						"code" : app.code
					}
				}).invoke("${path}/findNews", function(loj) {
					app.arts = loj.getValue("rows");
				});
			},
			loadOtherArt : function() {
				$.AjaxProxy({
					c : false,
					p : {
						"offset" : 0,
						"limit" : 11,
						"code" : "jzbz"
					}
				}).invoke("${path}/findNews", function(loj) {
					app.jzbz = loj.getValue("rows");
				});
				$.AjaxProxy({
					c : false,
					p : {
						"offset" : 0,
						"limit" : 6,
						"code" : "zzxkz"
					}
				}).invoke("${path}/findNews", function(loj) {
					app.zzxkz = loj.getValue("rows");
				});
				$.AjaxProxy({
					c : false,
					p : {
						"offset" : 0,
						"limit" : 6,
						"code" : "bgzx"
					}
				}).invoke("${path}/findNews", function(loj) {
					app.bgzx = loj.getValue("rows");
				});
				$.AjaxProxy({
					c : false,
					p : {
						"offset" : 0,
						"limit" : 4,
						"code" : "fwal"
					}
				}).invoke("${path}/findNews", function(loj) {
					app.fwal = loj.getValue("rows");
				});
			}
		},
	});
	app.loadArt();
	app.loadOtherArt();
	$(".tab-list").children("a").eq(0).addClass("active")
    $(".tab-list a").click(function () {
        $(this).addClass("active").siblings().removeClass("active")
       
    })

 
    
    
</script>

</body>
</html>
